<!-- @format -->

<template>
  <UseSpace title="使用 Form 校验 并增加必填提示">
    <Form @submit="onSubmit" :initial-values="theInitialValues">
      <FieldArray
        ref="theFieldArrayRef"
        name="links"
        v-slot="{ fields, push, remove }"
      >
        <div v-for="(entry, idx) in fields" :key="entry.key">
          {{ entry.value['field'] }}
          <Field :name="entry.value['field']" :rules="isRequired" />
          <ErrorMessage :name="entry.value['field']" />
        </div>
      </FieldArray>
      <button>Submit</button>
    </Form>
  </UseSpace>
</template>
<script setup>
  import { Field, Form, ErrorMessage, FieldArray } from 'vee-validate'

  import { theInitialValues } from './mock-data'
  function isRequired(value) {
    if (value && value.trim()) {
      return true
    }
    return 'This is required'
  }

  const onSubmit = (values) => {
    console.log('submit', values)
  }
</script>
